<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
    <title>退货</title>

    <link rel="icon" th:href="@{/favicon.ico}" href="/favicon.ico"/>
    <link rel="stylesheet" th:href="@{/plugins/mui/css/mui.min.css}"
          href="/static/plugins/mui/css/mui.min.css"/>
    <link rel="stylesheet" th:href="@{/plugins/iconfont/css/iconfont.css}"
          href="/static/plugins/iconfont/css/iconfont.css"/>
    <link rel="stylesheet" th:href="@{/css/style.css}"
          href="/static/css/style.css"/>

    <style>
        .footer {
            display: block;
            position: fixed;
            bottom: 0;
            width: 100%;
            height: 44px;
            z-index: 10;
        }

        .footer .mui-btn-clear, .mui-btn-confirm {
            border: 0;
            width: 50%;
            height: 44px;
            display: block;
            float: left;
            border-radius: 0;
            color: #ffffff;
        }

        .footer .mui-btn-clear {
            background-color: #cccccc;
        }

        .footer .mui-btn-confirm {
            background-color: #eb3e1f;
        }

        .footer .mui-btn-clear:active {
            background-color: #797979;
        }

        .footer .mui-btn-confirm:active {
            background-color: #d8381f;
        }

        /*   */

        #codeList .mui-table-view {
            background-color: #ffffff00;
        }

        #codeList .mui-table-view li {
            background-color: #ffffff;
            padding: 5px 10px;
            margin-bottom: 5px;
        }


        #codeList code,   #codeList delete {
            font-size: 14px;
            display: inline-block;
        }


        #codeList code {
            width: 80%;
        }

        #codeList delete {
            width: 20%;
            text-align: center;
            background-color: #d80c14;
            color: #ffffff;
        }
    </style>
</head>

<body>
<div class="bg">
    <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">退货</h1>
    </header>

    <div class="mui-content">
        <div class="mui-row" style="margin: 10px">
            <div class="mui-saomiao" style="margin-top: 5px">
                <span class="mui-icon mui-icon-add mui-icon-add-saomiao"></span>
                <input name="code" type="text" class="mui-input-clear" autocomplete="off" placeholder="扫码">
                <button name="add">添加</button>
            </div>
        </div>
    </div>

    <!-- 区域滚动的父容器 -->
    <div id="codeList" class="mui-scroll-wrapper" style="top: 110px; margin-bottom: 44px">
        <!-- 区域滚动的子容器 -->
        <div class="mui-scroll" style="padding: 0 10px">
            <!-- 真实的内容放到区域滚动的子容器里面 -->
            <ul class="mui-table-view"></ul>
        </div>
    </div>

    <footer class="footer">
        <button class="mui-btn mui-btn-clear">清空</button>
        <button class="mui-btn mui-btn-confirm">提交</button>
    </footer>
</div>
<script th:inline="javascript">
    window.ctxPath = /*[[@{/}]]*/ +'';
</script>
<script type="text/javascript" th:src="@{/plugins/mui/js/mui.min.js}"
        src="/static/plugins/mui/js/mui.min.js"></script>
<script type="text/javascript" th:src="@{/plugins/jquery/jquery-2.1.4.js}"
        src="/static/plugins/jquery/jquery-2.1.4.js"></script>
<script type="text/javascript" th:src="@{/plugins/jweixin/jweixin-1.0.0.js}"
        src="/static/plugins/jweixin/jweixin-1.0.0.js"></script>
<script type="text/javascript" th:src="@{/js/app.js}"
        src="/static/js/app.js"></script>
<script type="text/javascript" th:src="@{/js/returned.js}"
        src="/static/js/returned.js"></script>

</body>

</html>